<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            background-color: red;

        }
    </style>
</head>
<body>
<!--canvas默认的宽高是300*150-->
    <canvas width="600" height="600" id="can">您
        的浏览器版本太低，不支持画布，请升级您的浏览器</canvas>
<script type="text/javascript">
    //1、获取画布
    var box=document.getElementById("can");
    //2、获取画笔----通过上下文来获取画笔，必须传进来2d，指定只能画2d图像
    var pen=box.getContext("2d");
    //moveTo()----定义起始点的位置
    pen.moveTo(50,100);
    //lineTo()----定义终点的位置
    pen.lineTo(100,200);
    //stroke()----渲染边框
    pen.stroke();




</script>
</body>
</html>